<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>实物锦标赛</title>
    <link href="css/mui.min.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/aui.css"/>
    <link rel="stylesheet" href="css/shop.css">
    <link rel="stylesheet" href="css/alert.css">
    <script src="js/jquery-1.8.2.min.js"></script>
    <script src="js/mui.min.js"></script>
    <style>
        @media screen and (max-width:320px){
            #bz_scroll{height:54vh;padding:20px;}
        }
        @media screen and (min-width:321px) and (max-width:375px){
            #bz_scroll{height:58vh;}
        }
    </style>
    <script>
        function autoload(){
            var data={};
            data.user_id=user_id;
            data.userpwd=userpwd;
            $.ajax({
                type: "POST",
                //url: "http://test/jsonp.php",
                data: data,
                url: "http://xjh.taoleyizhan.com/wap/index.php?ctl=mainpage&show_prog=1",
                dataType: "json",
                success: function (json) {
                    console.log(json);
                    page_data=json
                    var noticeList="";

                    for(var i=0;i<page_data.newest_lottery_list.length;i++){
                        noticeList+='<li class="ellipsis"><img src="images/jiangpin.png" alt="">恭喜'+page_data.newest_lottery_list[i].user_name+'获得'+page_data.newest_lottery_list[i].name+' </li>';
                    }
                    $("#lunbo1").html(noticeList)
                    $("#page_title").text(page_data.page_title)
                    $("#user_tx").attr("src",hostUrl+ page_data.user_logo);
                    $("#user_name").html(page_data.user_name);
                    $("#user_id").html(user_id);
                    $("#user_id").html("ID:"+page_data.id+"")
                    $("#jifen").html(page_data.user_money_int);
                    $("#jiushui").html(page_data.user_score)

                    // InitChat();
                },
                error:function(json){
                    console.log(json);
                }
            });

            $.ajax({
                type: "POST",
                //url: "http://test/jsonp.php",
                data: data,
                url: "http://xjh.taoleyizhan.com/wap/index.php?ctl=baozang",
                dataType: "json",
                success: function (json) {
                    console.log(json);
                    page_data=json;
                    var list="";
                    if(page_data.deal_list2){
                      //  for(i=0;i<page_data.deal_list.length;i++){
                            list+='<li onclick="detail(2,\''+hostUrl+page_data.deal_list2[0].icon+'\',\''+page_data.deal_list2[0].name+'\',\''+page_data.deal_list2[0].description+'\','+page_data.deal_list2[0].current_price+')"> <div class="shiwu_shop mui-text-center re"> <img src="'+hostUrl+page_data.deal_list2[0].icon+'" class="shouhuan vmid" alt="" height="90%"> <div class="num ab">2人</div> </div> <div class="list_con aui-pad-5"> <img src="images/zuan.png" alt="" width="14"><span class="f14 aui-color-red">'+page_data.deal_list2[0].current_price/2+'</span> <span class="fr">还差1人</span> </div> </li>'
                      //  }
                    }
                    if(page_data.deal_list4){
                        //  for(i=0;i<page_data.deal_list.length;i++){
                        list+='<li onclick="detail(4,\''+hostUrl+page_data.deal_list4[0].icon+'\',\''+page_data.deal_list4[0].name+'\',\''+page_data.deal_list4[0].description+'\','+page_data.deal_list4[0].current_price+')"> <div class="shiwu_shop mui-text-center re"> <img src="'+hostUrl+page_data.deal_list4[0].icon+'" class="shouhuan vmid" alt="" height="90%"> <div class="num ab">4人</div> </div> <div class="list_con aui-pad-5"> <img src="images/zuan.png" alt="" width="14"><span class="f14 aui-color-red">'+page_data.deal_list4[0].current_price/4+'</span> <span class="fr">还差1人</span> </div> </li>'
                        //  }
                    }
                    if(page_data.deal_list8){
                        //  for(i=0;i<page_data.deal_list.length;i++){
                        list+='<li onclick="detail(8,\''+hostUrl+page_data.deal_list8[0].icon+'\',\''+page_data.deal_list8[0].name+'\',\''+page_data.deal_list8[0].description+'\','+page_data.deal_list8[0].current_price+')"> <div class="shiwu_shop mui-text-center re"> <img src="'+hostUrl+page_data.deal_list8[0].icon+'" class="shouhuan vmid" alt="" height="90%"> <div class="num ab">8人</div> </div> <div class="list_con aui-pad-5"> <img src="images/zuan.png" alt="" width="14"><span class="f14 aui-color-red">'+page_data.deal_list8[0].current_price/8+'</span> <span class="fr">还差1人</span> </div> </li>'
                        //  }
                    }
                    if(page_data.deal_list16){
                        //  for(i=0;i<page_data.deal_list.length;i++){
                        list+='<li onclick="detail(16,\''+hostUrl+page_data.deal_list16[0].icon+'\',\''+page_data.deal_list16[0].name+'\',\''+page_data.deal_list16[0].description+'\','+page_data.deal_list16[0].current_price+')"> <div class="shiwu_shop mui-text-center re"> <img src="'+hostUrl+page_data.deal_list16[0].icon+'" class="shouhuan vmid" alt="" height="90%"> <div class="num ab">16人</div> </div> <div class="list_con aui-pad-5"> <img src="images/zuan.png" alt="" width="14"><span class="f14 aui-color-red">'+page_data.deal_list16[0].current_price/16+'</span> <span class="fr">还差1人</span> </div> </li>'
                        //  }
                    }


                    $(".shiwu_box").html(list);
                    InitChat();
                },
                error:function(json){
                    console.log(json);
                }
            });

        }
    </script>
    <script src="js/init.js"></script>
</head>
<body>
    <header class="mui-bar mui-bar-nav ">
        <a href="index.html" class="mui-icon-undo mui-icon mui-icon-left-nav mui-pull-left"></a>
        <h1 class="mui-title" >实物锦标赛</h1>
    </header>

    <div class="mui-content">
        <div class="user re aui-mar-t-10 f12" style="height:50px;line-height:1.6;">
            <div class="re" style="width:55%;">
                <div class="user_bg ab" style="left:-10%;"></div>
                <div class="ab" style="z-index:2;">
                    <img id="user_tx" class="user_tx aui-mar-l-5" style="margin-top:-5px;width:50px;height:50px;" src="image/avatar.png" alt="">
                    <img class="ab" style="right:0;bottom:5px;" src="image/sex1.png" alt="" width="12">
                </div>
                <div class="ab aui-pad-t-5 aui-col-9 hidden" style="padding-left:70px;">
                    <div id="user_name" class="nowrap">小思设计2017小思</div>
                    <div id="user_id" class="nowrap" style="font-size:10px;">ID:123456</div>
                </div>
            </div>
            <div class="user_jf ab" style="width:45%;">
                <div class="user_bg ab" style="right:-10%;height:40px;"></div>
                <div class="index_buy ab f10"><a href="maiquan.html" class="aui-color-black">购 券</a></div>
                <div class="ab aui-col-6 nowrap" style="padding:10px 0 0 20px">
                    <img class="vmid aui-mar-r-5" src="images/zuan.png" alt="" width="14"><span id="jifen"></span>
                </div>
            </div>
        </div>
        <!--user信息-->

        <div class="aui-pad-10">
            <!--<div class="icon mui-text-right">-->
                <!--<a href="backpack.html"><img src="images/beibao-icon.png" alt="" width="30"></a>-->
                <!--<a href="help.html"><img src="images/help_icon.png" alt="" width="30"></a>-->
                <!--<img src="images/set-icon.png" alt="" width="30">-->
            <!--</div>-->
            <div class="flex aui-pad-10 f14 aui-border-radius" style="background:#fee630;box-shadow:3px 3px 3px #dab91e;">
                <div class="f1"><img class="vmid border-r-1 aui-pad-r-10" src="images/jiebao.png" alt="" height="30"></div>
                <div class="f5 border-r-1 hidden" id="lunbo_content">
                    <div id="lunbo" style="width:95%;height:30px;overflow: hidden;color:#d80000;float:left;">
                        <a class="block aui-color-red" href="zhongjiang.html">
                            <ul id="lunbo1">
                                <li class="ellipsis"><img src="images/jiangpin.png" alt="">恭喜司马懿 在独闯江湖游戏中斩获冠军，获得一部iPhone7plus。</li>
                                <li class="ellipsis"><img src="images/jiangpin.png" alt="">恭喜司马懿 在独闯江湖游戏中斩获冠军，获得一部iPhone7plus。</li>
                                <li class="ellipsis"><img src="images/jiangpin.png" alt="">恭喜司马懿 在独闯江湖游戏中斩获冠军，获得一部iPhone7plus。</li>
                            </ul>
                            <ul id="lunbo2"></ul></a>
                    </div>
                </div>
                <div class="f1 mui-text-right f12" style="line-height:30px;">更多</div>
            </div>
            <!--江湖捷报-->
            <div class="aui-mar-t-15"><img class="aui-col-10" src="images/baozang_banner.png" alt=""></div>

            <div id="bz_scroll" class="back_scroll_bg aui-col-10 fix f12" style="left:0;bottom:0;">
                <ul class="shiwu_box list_box">
                    <li onclick="detail(2)">
                        <div class="shiwu_shop mui-text-center re">
                            <img src="" class="shouhuan vmid" alt="" height="90%">
                            <div class="num ab">2人</div>
                        </div>
                        <div class="list_con aui-pad-5">
                            <img src="images/zuan.png" alt="" width="14"><span class="f14 aui-color-red">1888</span>
                            <span class="fr">还差1人</span>
                        </div>
                    </li>
                    <li>
                        <div class="shiwu_shop mui-text-center re">
                            <img src="" class="vmid" alt="" height="90%">
                            <div class="num ab">4人</div>
                        </div>
                        <div class="list_con aui-pad-5">
                            <img src="images/zuan.png" alt="" width="14"><span class="f14 aui-color-red">1888</span>
                            <span class="fr">还差1人</span>
                        </div>
                    </li>
                    <li>
                        <div class="shiwu_shop mui-text-center re">
                            <img src="" class="shouhuan vmid" alt="" height="90%">
                            <div class="num ab">8人</div>
                        </div>
                        <div class="list_con aui-pad-5">
                            <img src="images/zuan.png" alt="" width="14"><span class="f14 aui-color-red">1888</span>
                            <span class="fr">还差1人</span>
                        </div>
                    </li>
                    <li>
                        <div class="shiwu_shop mui-text-center re">
                            <img src="" class="vmid" alt="" height="90%">
                            <div class="num ab">16人</div>
                        </div>
                        <div class="list_con aui-pad-5">
                            <img src="images/zuan.png" alt="" width="14"><span class="f14 aui-color-red">1888</span>
                            <span class="fr">还差1人</span>
                        </div>
                    </li>

                </ul>

            </div>
        </div>
    </div>

    <!--弹窗开始-->
    <div class="alert none">
        <div class="renshu box mui-text-center re f12 none">
            <img id="deal_icon" class="user_tx ab aui-border-rasius-y" src="image/avatar.png" alt="" width="80" height="80">
            <div id="numtxt" class="ab aui-border-radius-15" style="top:20px;left:20px;width:40px;background:#e4cf82;">2人</div>
            <div class="f14"><b id="deal_name">固态硬盘256G</b></div>
            <div id="deal_description" class="hidden mui-text-left aui-mar-t-5" style="height:40px;line-height:20px;"></div>
            <div class="aui-mar-10 flex">
                <div class="f1">商品总价:<br/><span id="all_money" class="aui-color-red">288</span></div>
                <div class="f1">人均消耗:<br/><span id="buy_money" class="aui-color-red">288</span></div>
            </div>
            <!--<div class="moshi aui-border-radius-30 aui-bg-deepyellow aui-mar-b-15 re" style="height:30px;line-height:30px;">-->
                <!--<span>选择模式</span>-->
                <!--<ul class="moshi_nav ab aui-col-10 none" style="width:calc(100% - 20px);margin-left:10px;border-top:1px solid #fff;">-->
                    <!--<li>独闯江湖</li>-->
                    <!--<li>拉帮结派</li>-->
                <!--</ul>-->
            <!--</div>-->
            <div class="mui-text-center flex hidden">
                <div class="cancel gray_btn auto">取消</div>
                <div class="quitepipei orange_btn auto" onclick="go(1)">快速匹配</div>
                <!--<div class="green_btn fl aui-mar-l-10">创建房间</div>-->
            </div>
        </div>

        <!--快速匹配动画-->
        <div id="pipei" class="pipei2 mui-text-center f14 none">
            <!--<img class="pipei_loop" src="images/pipei_loop.png" alt="">-->
            <img class="pipei_tx ab" src="image/avatar.png" alt="">
            <img class="user_all ab" src="images/pipei_user.png" alt="">
            <div class="pipei_user ab">
                <div class="f16 aui-pad-b-15">司马懿</div>
                <div class="pipei_renshu">
                    <div>已报名 <span class="f16">4人</span>&nbsp;&nbsp;&nbsp;&nbsp;未报名 <span class="f16">12人</span></div>
                    <div id="numtxt2">满16人开赛</div>
                </div>
                <div class="aui-pad-t-10"><img class="aui-mar-r-5 vmid" src="images/xing.png" alt="" width="14">20</div>
            </div>
        </div>

        <div class="user_info box f14 mui-text-center re none">
            <img class="user_tx ab aui-border-rasius-y" src="image/avatar.png" alt="" width="80" height="80">
            <div style="overflow:hidden;">
                <div class="aui-pad-b-5"><img class="aui-mar-r-10" src="image/sex1.png" alt="" width="14"><b>司马懿</b> <span class="f12">ID:999</span></div>
                <div class="mui-row aui-pad-10 line-height-2">
                    <div class="mui-col-sm-6 mui-col-xs-6">
                        <div>段位：绿蓝带</div>
                        <div>胜率：77%</div>
                    </div>
                    <div class="mui-col-sm-6 mui-col-xs-6">
                        <div>人气：999</div>
                        <div>运气：9999</div>
                    </div>
                </div>
                <div class="yes orange_btn auto">确定</div>
            </div>
        </div>
        <!--用户信息-->
    </div>
    <!--<input type="hidden" value="" id="buy_money" />-->
    <input type="hidden" value="" id="game_num" />
    <input type="hidden" value="" id="deal_id" />
    <input type="hidden" value="1" id="isTrue" />
</body>
<script src="js/jiebao.js"></script>
<script src="js/alert.js"></script>
<script>
    function detail(str0,str1,str2,str3,str4) {
        $(".alert").show();
        $(".renshu").show();
        $("#deal_name").html(str2);
        $("#deal_icon").attr("src",str1);
        $("#deal_description").html(str3);
        $("#all_money").html(str4);
        $("#buy_money").html(str4/str0);
        $("#numtxt").html(str0+"人");
    }
    function go(type){//0创建房间 1快速匹配
        if($("#buy_money").text()*1>page_data.user_info.money){
            alert('积分不足，无法开始游戏');
            location.reload()
        }else{
            var isTrue = $("#isTrue").val();
            var game_num=$("#game_num").val();
            var deal_id=$("#deal_id").val();
            if(isTrue=="1") {
                if(type==0){
                    //跳转到监听创建房间玩家信息
                    $("#isTrue").val("0");
                    var join_group_cj='cj'+deal_id+"-"+game_num+"-"+page_data.user_info.id;
                    window.location.href='index.php?ctl=game&act=join&group_name='+join_group_cj+'&deal_id='+deal_id+'&game_num='+game_num;
                }else{
                    //监听快速匹配玩家信息
                    var join_group=deal_id+"-"+game_num+"-"+page_data.user_info.id;
                    init(join_group);
                }
            }

        }
    }
</script>
<script>
    var ws;
    function init(join_group) {
        var host = tcpHost;
        try {
            ws = new WebSocket(host);
            ws.onopen = function(){
                console.log('连接成功!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1!');
                var data={};
                data.uid=user_id;
                data.m='index';
                data.a='slogin';
                ws.send(JSON.stringify(data));
                console.log('发送登陆数据完毕');
            };
            ws.onmessage = function (e) {
                var data = JSON.parse(e.data);
                console.log(data);
                if(data.type=="ping"){
                    var sendData={};
                    sendData.m="index"
                    sendData.a="index"
                    console.log('心跳检测响应')
                    ws.send(JSON.stringify(sendData));
                }
                if(data.m=='slogin'){
                    console.log('登录成功');
                    var join={};
                    join.uid=user_id;
                    join.m='index';
                    join.a='match';
                    join.deal_id=$("#deal_id").val()+'_'+$("#game_num").val();
                    join.num=$("#game_num").val();
                    ws.send(JSON.stringify(join));
                    console.log('join_group通知完毕');
                }
                if(data.m=='index'){
                    console.log(data);
                    //alert(n[1]);
                    $("#bm_num").html(data.innums);
                    $("#cha_num").html(data.else);
                }
                if(data.m=='stop'){
                    $("#bm_num").html(data.innums);
                    $("#cha_num").html(data.else);
                }
                if(data.m=='joinRoom'){
                    console.log(data);
                    var nums=data.nums;
                    var roomid=data.roomid;
                    window.location.href="join.html?roomid="+roomid+"&deal_id="+$("#deal_id").val()+'_'+$("#game_num").val()+"&game_num="+nums;

                }
                if(data.m=='creatRoom'){
                    console.log(data);
                    var nums=data.nums;
                    window.location.href='join.html?creatRoom=1&deal_id='+$("#deal_id").val()+'_'+$("#game_num").val()+'&game_num='+nums;
                }
                //监听人满开车
                if(data.m=="go"){
                    localStorage.roomid=data.roomid
                    ws.close();
                    window.location.href="doing.html"
                }

                console.log('监听消息:'+e.data);
            };
            ws.onclose = function (msg) {
                console.log('关闭连接');
                ws.close();
                $(".alert-lg").hide();
                $("#set").hide();
                $("#zhujiu").hide();
                $("#damaoxian").hide();
                $("#xieyi").hide();
                $("#jiuliang").hide()
                $("#sousuo").hide();
                $("#pipei").hide();
                $("#pipei1").hide();
            };
        }
        catch (ex) {
            console.log(ex);
        }
    }

    function send(msg) {
        try {
            ws.send(msg);
        } catch (ex) {
            console.log(ex);
        }
    }
    //刷新或关闭
    /*window.onbeforeunload = function () {
        try {
            //监听异常退出事件
            var game_num=$("#game_num").val();
            var deal_id=$("#deal_id").val();
            ws.send("out_group:"+deal_id+"-"+game_num);//out_group:deal_id-game_num
            ws.close();
            ws = null;
        }
        catch (ex) {
            console.log(ex);
        }
    };*/
    //手动关闭
    function close_ws(){
        try {
            //监听点击取消事件
            console.log("退出事件")
            var game_num=$("#numtxt2").html();
            var deal_id=$("#deal_id").val();
            var data={};
            data.m="index";
            data.a="stop";
            data.deal_id=$("#deal_id").val()+'_'+$("#game_num").val();
            data.num=4;
            data.uid=user_id;
            ws.send(JSON.stringify(data));
            ws.close();
        }
        catch (ex) {
            console.log(ex);
        }
    }
</script>

</html>